<template>
  <div class="draggable-item-wrapper" @click="emit('onClick', item)">
    <div class="draggable-item-body">{{ item.componentFunctionName }}</div>
  </div>
</template>

<script setup lang="ts">
import { type PropType } from 'vue'
import type { IDiyBase } from '@/diy/types'

defineProps({
  item: {
    type: Object as PropType<IDiyBase>,
    required: true
  }
})

const emit = defineEmits(['onClick'])
</script>

<style lang="less" scoped>
.draggable-item-wrapper {
  .draggable-item-body {
    text-align: center;
    padding: 8px 10px;
    background: #f6f7ff;
    font-size: 12px;
    cursor: move;
    border: 1px dashed #f6f7ff;
    border-radius: 3px;
    &:hover {
      border: 1px dashed #787be8;
      color: #787be8;
    }
  }
}
</style>
